<template>
	<a-row type="flex" class="line-head flex flex-col">
		<a-col class="flex">
			<a-popover v-if="!props.disabled" placement="rightTop" trigger="hover">
				<template #content>
					<div>
						<div
							v-if="ewaytel.configs.communicationType?.includes(0)"
							class="p-2 pointer hover-color"
							@click="onLaunch('1')"
						>
							线路外呼
						</div>
						<div
							v-if="ewaytel.configs.communicationType?.includes(1)"
							class="p-2 pointer hover-color"
							@click="onLaunch('2')"
						>
							4G多卡话机
						</div>
					</div>
				</template>
				<bars-outlined
					class="mr-2"
					:style="{
						fontSize: '24px'
					}"
				/>
			</a-popover>
			<bars-outlined
				v-else
				class="mr-2"
				:style="{
					fontSize: '24px'
				}"
			/>
			<span>{{ communicateMethodText }}</span>
			<span v-show="store.is4GCall">
				<a-tag v-if="ewaytel.isConnectSuccess" class="ml-4" color="green">已连接</a-tag>
				<a-tag v-if="ewaytel.isConnectFail" class="ml-4" color="red">未连接</a-tag>
			</span>
		</a-col>
		<a-col v-show="store.is4GCall" flex="2" class="mt-2">
			<a-select
				:value="ewaytel.cBSwitchType"
				:options="cBSwitchOptions"
				placeholder="请选择"
				:allow-clear="false"
				:disabled="simDisabled"
				@change="handleSwitchChange"
			/>
			<a-select
				:value="ewaytel.currSIMIndex"
				:options="ewaytel.usedSimList"
				placeholder="请选择"
				:allow-clear="false"
				:disabled="simDisabled || ewaytel.cBSwitchType === '1'"
				@change="handleSimChange"
			/>
		</a-col>
	</a-row>
</template>

<script setup>
	import { globalStore, ewaytelStore } from '@/store'

	const store = globalStore()
	const ewaytel = ewaytelStore()

	const emits = defineEmits(['onLaunch'])

	const props = defineProps({
		disabled: {
			type: Boolean,
			default: () => false
		}
	})

	const communicateMethodText = computed(() =>
		store.isLineCall ? '线路外呼' : store.is4GCall ? '4G多卡话机' : '请选择通讯方式'
	)
	const simDisabled = computed(() => props.disabled || ewaytel.isConnectFail || ewaytel.telInstance?.otherCallStatus)
	const onLaunch = (val) => {
		store.setPhoneMethod(val)
		emits('onLaunch', val)
	}

	// 换卡
	const cBSwitchOptions = ref([
		{ label: '顺序换卡', value: '1' },
		{ label: '手动换卡', value: '2' }
	])
	const handleSwitchChange = (val) => {
		ewaytel.cbSwitchNext(val, null)
	}
	const handleSimChange = (val) => {
		ewaytel.cbSwitchNext('2', val)
	}
</script>

<style lang="less" scoped>
	.pointer {
		cursor: pointer;
	}
	.hover-color:hover {
		color: #1890ff;
	}
	.line-head {
		margin-bottom: 20px;
	}
</style>
